 <meta charset="UTF-8">
<div id="root">
    <qfnavbar  title='商品创建' @click-left='backleftFn' @click-right='backrightFn'></qfnavbar>
    <creattable :state = 'false' ref='a'></creattable>
    <creattable :state = 'false'></creattable>
    <creattable :state = 'false'></creattable>
    <button @click='submitFn'>提交</button>
    <h1>按钮</h1>
    <qf-button type='primary' content='主要按钮'></qf-button>
    <qf-button type='info' content='信息按钮'></qf-button>
    <qf-button type='default' content='默认按钮'></qf-button>
    <qf-button type='warning' content='警告按钮'></qf-button>
    <qf-button type='danger' content='危险按钮'></qf-button>
    <h1>loading</h1>
    <qf-loading :state="loadingstate"></qf-loading>
    <button @click="loadingstate =true">显示</button>
    <button @click="loadingstate =false">隐藏</button>
    
    <h1>loading...</h1>
    <qf-loading2 :state="loadingstate1" @close='() => loadingstate1 = false'></qf-loading2>
    <button @click="loadingstate1 =true">显示</button>

    <h1>qs-dialog</h1>
    <qs-dialog title="这是我的第一个对话框" content="高荐群" :state='dialog' @close="() =>dialog=false "></qs-dialog>
    <button @click="dialog = true">确认框</button>

    <h1>分页</h1>
    <qf-pagenum :total="16" :pagenum="2" @close='fenyFn'></qf-pagenum>

    <h1>table表格</h1>
    <qf-table :trcontent='sptrcontentfn' :tdcontent='sptdcontentfn'></qf-table>
    <qf-table :trcontent='goodstrcontentfn' :tdcontent='goods'></qf-table>

    <h1>element Table</h1>

        <qf-tableone :data="tableDate">
          <qf-table-column prop="id" label="编号"></qf-table-column>
          <qf-table-column prop="name" label="姓名"></qf-table-column>
          <qf-table-column prop="age" label="年龄"></qf-table-column>
          <!-- <qf-table-column label="性别">
              <template slot-scope="item">{{ item.sex == 1 ? '女'：'男' }}</template>
          </qf-table-column> -->
        </qf-tableone>



</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src='qf.js'></script>
<link rel="stylesheet" href="qf.css">

<script>
const vm = new Vue({
    el: "#root",
    data: {
        loadingstate:true,
        loadingstate1:false,
        dialog:false,
        sptrcontentfn:[
            {title:'编号',key:'id'},
            {title:'姓名',key:'uname'}
        ],
        sptdcontentfn:[
            {id:1,uname:"jqgao"},
            {id:2,uname:"bonfire" }
        ],
        goodstrcontentfn:[
            {title:'编号',key:'id'},
            {title:'姓名',key:'uname'},
            {title:'价格',key:'price'}
        ],
        goods:[
            {id:1,uname:'菠萝',price:'19.9'},
            {id:2,uname:'元气森林',price:'5'},
            {id:3,uname:'蓝莓',price:'19.9'}
        ],
        tableDate:[
            { id:1,name:"jqg",age:12,sex:1},
            { id:2,name:"bonfire",age:13,sex:2},
            { id:3,name:"bonfirejgq",age:23,sex:1},
        ]
    },
    methods: {
        
        fenyFn(item){
            console.log("第几页",item);
        },
        submitFn(){
            console.log(this.$refs.a.formdate);
            alert('商品创建请求接口代码')
        },
        backleftFn(){
            alert('返回')
        },
        backrightFn(){
            alert('搜素')
        }
    }
})
</script>